<template>
    <div>
        <template v-for="menu in userMenu">
            <el-sub-menu v-if="
                menu.children && 
                menu.children.length > 0 && 
                menu.children[0].menuType == 1" 
                :key="menu._id" 
                :index="menu.path"
            >
                <template #title>
                    <el-icon>
                        <Setting />
                    </el-icon>
                    <!-- <i :class="menu.icon"></i> -->
                    <span>{{menu.menuName}}</span>
                </template>
                <tree-menu :userMenu="menu.children"/>
            </el-sub-menu>

            <el-menu-item 
                v-else-if="menu.menuType == 1" 
                :index="menu.path" 
                :key=" menu._id">{{menu.menuName}}</el-menu-item
            >
        </template>
    </div>
</template>

<script>
export default {
    name: 'TreeMenu',
    props:{ // 选项用于接收父组件传递的数据。这里定义了一个名为 userMenu 的属性，其类型为数组。
        userMenu:{
            type:Array,
            default(){ // default 函数为 userMenu 属性提供了默认值，当父组件没有传递该属性时，默认使用空数组。
                return [];
            },
        },
    },
};
</script>